<template>
  <div id="searchResult" class="full-page">
    <div class="wrapper">
      <!-- 搜索框区域 -->
      <van-search
        v-model="item_name"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
      </van-search>
      <!-- 下拉面板区域 -->
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="rank_type"
          :options="rankOption"
          @change="onSearch"
        />
      </van-dropdown-menu>

      <!-- 单个商品标签卡 -->
      <van-card
        class="card"
        v-for="(item, index) in items.filter(item => item.name != null)"
        :key="index"
        :price="item.current_price"
        :desc="item.info"
        :title="item.name"
        :thumb="'data:image;base64,' + item.images[0]"
        @click="onItemClick(item.item_id)"
      >
        <div slot="bottom">
          <span>销量 {{ item.sales }}</span>
        </div>
        <div slot="footer">
          <div style="height:10px;" />
          <div class="van-hairline--top"></div>
        </div>
      </van-card>
      <div class="push" />
    </div>
    <!-- 分页器 -->
    <div class="footer">
      <van-pagination
        v-model="group_index"
        :total-items="total"
        :show-page-size="3"
        :items-per-page="6"
        force-ellipses
        @change="groupIndexChange"
      />
    </div>
  </div>
</template>
<script>
import { axios, API_URL } from "../../api"
import {
  DropdownMenu,
  DropdownItem,
  Card,
  Button,
  search,
  Icon,
  Pagination
} from "vant"
export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Card.name]: Card,
    [Button.name]: Button,
    [search.name]: search,
    [Icon.name]: Icon,
    [Pagination.name]: Pagination
  },
  data() {
    return {
      items: [],
      loading: false,
      finished: false,
      rank_type: 5,
      item_name: "",
      shop_id: 0,
      rankOption: [
        { text: "价格从大到小", value: 1 },
        { text: "价格从小到大", value: 2 },
        { text: "好评从大到小", value: 3 },
        { text: "好评从小到大", value: 4 },
        { text: "销量从大到小", value: 5 },
        { text: "销量从小到大", value: 6 }
      ],
      group_index: 1,
      total: 0
    }
  },
  methods: {
    groupIndexChange() {
      this.search(
        this.item_name,
        this.shop_id,
        this.rank_type,
        this.group_index - 1
      )
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
    onItemClick(item_id) {
      this.$router.push({ name: "item", params: { item_id: item_id } })
    },
    search(search_item, shop_id, rank_type, group_index) {
      // 清空数组,刷新页面
      this.items = []
      // 获取商品的id列表
      axios
        .get(API_URL + "item/search", {
          params: {
            item_name: search_item,
            shop_id: shop_id,
            rank_type: rank_type,
            group_index: group_index
          }
        })
        .then(response => {
          this.item_ids = response.data.item_ids
          this.total = response.data.total
          // 根据item_id获得商品信息
          this.item_ids.forEach(item_id => {
            let newItem = { item_id: item_id }
            this.items.push(newItem)
            axios
              .get(API_URL + "items/" + item_id, {})
              .then(response => {
                let item = newItem
                item.name = response.data.name
                item.current_price = response.data.current_price
                item.original_price = response.data.original_price
                item.in_stock = response.data.in_stock
                item.info = response.data.info
                item.sales = response.data.sales
                item.shop_id = response.data.shop_id
                item.images = response.data.images
                // 强制刷新
                this.items = this.items.splice(0)
              })
              .catch(err => {
                console.error(err)
              })
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    onSearch() {
      this.search(this.item_name, this.shop_id, this.rank_type, 0)
    }
  },
  /* 预载搜索商品信息 */
  mounted: function() {
    this.item_name = this.$route.query.item_name
    this.shop_id = this.$route.query.shop_id
    this.onSearch()
  }
}
</script>

<style scoped>
.van-card__price {
  font-size: 1.4em;
}
.van-card__title {
  font-size: 1.4em;
}
.van-card__bottom {
  margin-top: 13px;
}
.card {
  width: 100%;
  background-color: #ffffff;
}
.wrapper {
  min-height: 100%;

  /* 等于footer的高度 */
  margin-bottom: -40px;
}
.footer,
.push {
  height: 40px;
}
</style>
